<%--
  Created by IntelliJ IDEA.
  User: Yy
  Date: 2022/5/7
  Time: 15:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生列表</title>
    <%--    css   js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script>
        layui.use(['table','util','jquery','layer','form'],function () {
            var table=layui.table,util=layui.util,$=layui.jquery,layer=layui.layer,form=layui.form;
            //监听显示全部按钮
            $("#list-btn").click(function () {
                location.reload('demo');
            });

            form.verify({
                num_zz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });

            //监听表单模糊查询
            form.on('submit(search-btn)',function (d) {
                var stuId=$("#stuId").val();
                var stuname=$("#stuname").val();
                table.reload('titleStu',{//指定条件重载table
                    page:{page:1},
                    where:{     //条件
                        stuId:stuId,
                        stuname:stuname,
                    },
                });
            });



            //监听添加按钮
            $("#add-btn").click(function () {
                layer.open({
                    type:2,//设置为iframe
                    fix:false,//不固定
                    maxmin:true,//出现最大化最小化按钮
                    offset:'5px',//垂直水平位置
                    shade:0.4,//遮罩层透明度
                    area:['500px','700px'],//弹出层宽高
                    title:"新增",//弹出层标题
                    content:'${pageContext.request.contextPath}/stu/toaddstu'//弹出层内网页
                });
            });

            //监听工具栏按钮
            table.on('tool(demo)',function (res) {
                var row=res.data; //获取当前行的数据
                var event=res.event;//获取点的是哪个按钮
                var stuId=row.stuId;//获取行中的id列
                if (event=='del'){//删除用户
                    layer.confirm("是否删除该学生？",{
                        btn:['确定','取消']
                    },function() {
                        $.post("${pageContext.request.contextPath}/stu/delstu",{stuId:stuId},function (data) {
                            layer.msg(data.msg);//使用消息层 显示删除的结果
                            table.reload('titleStu',{
                                url:"${pageContext.request.contextPath}/stu/stulist"
                            });
                        },"json");
                    });
                };
                if(event=='edit'){
                    layer.open({
                        type:2,//设置为iframe
                        fix:false,//不固定
                        maxmin:true,//出现最大化最小化按钮
                        offset:'10px',//垂直水平位置
                        shadeClose:true,
                        shade:0.4,//遮罩层透明度
                        area:['500px','700px'],//弹出层宽高
                        title:"修改",//弹出层标题
                        content:'${pageContext.request.contextPath}/stu/toupdstu/'+stuId//弹出层内网页
                    });
                };
            });
        });
    </script>
</head>
<body>
<%--<h1 style="text-align: center">学生信息</h1>--%>
<div>
    <form class="layui-form">
        <div class="layui-inline">编号:</div>
        <div class="layui-inline">
            <input type="text" name="stuId" id="stuId" class="layui-input" lay-verify="num_zz" />
        </div>
        <div class="layui-inline">名字:</div>
        <div class="layui-inline">
            <input type="text" name="stuname" id="stuname" class="layui-input"/>
        </div>
        <a class="layui-btn" lay-filter="search-btn" lay-submit lay-size="sm">搜索</a>
        <a class="layui-btn" id="add-btn" lay-size="sm">添加学生</a>
        <a class="layui-btn" id="list-btn" lay-filter="list-btn" lay-size="sm">显示全部</a>
    </form>
</div>
<table class="layui-table" id="titleStu" lay-filter="demo" lay-size="sm"
       lay-data="{url:'${pageContext.request.contextPath}/stu/stulist',page:true,id:'titleStu'}"
>
    <thead>
    <tr>
        <th lay-data="{field:'stuId',sort:true}">学生编号</th>
        <th lay-data="{field:'stuname',sort:true}">学生姓名</th>
        <th lay-data="{field:'middleschool',sort:true}">毕业学校</th>
        <th lay-data="{field:'sex',sort:true}">性别</th>
        <th lay-data="{field:'age',sort:true}">年龄</th>
        <th lay-data="{field:'birthday',sort:true}">出生年月</th>
        <th lay-data="{field:'phone',sort:true}">学生电话</th>
        <th lay-data="{field:'addr',sort:true}">家庭地址</th>
        <th lay-data="{field:'className',sort:true}">班级</th>
        <th lay-data="{field:'huorName',sort:true}">宿舍</th>
        <th lay-data="{field:'entertime',sort:true}">入学时间</th>
        <th lay-data="{toolbar:'#tools',width:150,align:'center',fixed:'right'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>
